<template>
  <div
    v-if="open && cart.totalPieces"
    class="bg-mask-5 fixed bottom-122px left-160px w-1076px h-680px"
    @click.stop="closeUp"
  >
    <transition name="slideUp">
      <div v-if="open" class="bg-card-item absolute left-0 bottom-0 w-full" @click.stop="close">
        <div class="flex items-center justify-between category-item-title h-48px px-22px">
          <div class="text-18px font-medium text-white">
            全部商品 {{ cart.totalSelectedPieces }}
          </div>
          <div class="flex items-center justify-between cursor-pointer">
            <div><img :src="clearCart" alt="" /></div>
            <div class="color-white-opacity-6 text-14px ml-8px" @click.stop="clear">清空购物车</div>
          </div>
        </div>
        <div
          class="flex text-14px color-white-opacity-6 mt-12px mb-20px px-22px font-weight-350 leading-20px"
        >
          <div class="text-left w-274px">商品信息</div>
          <div class="flex-1 text-center">单价</div>
          <div class="w-78px text-center">数量</div>
          <div class="flex-1 text-center">总价</div>
          <div class="flex-1 text-center">操作</div>
        </div>
        <div
          v-for="item in cart.getSelectedSkus"
          :key="item.id"
          class="flex px-22px mb-22px font-weight-350 items-center"
        >
          <div class="flex-1 text-left flex w-274px">
            <div class="w-72px h-72px">
              <img :src="item.url" class="w-full h-full" alt="" />
            </div>
            <div class="ml-12px">
              <p class="text-14px text-white leading-20px mb-11px">{{ item.name }}</p>
              <p class="text-12px color-white-opacity-6 leading-17px w-190px">
                {{ item.number }}分、{{
                  JSON.parse(item.combination || '[]').reduce(
                    (prev, cur) => (prev += cur.value),
                    ''
                  )
                }}
              </p>
            </div>
          </div>
          <div class="flex-1 text-center text-14px text-white leading-20px">￥{{ item.price }}</div>
          <div class="w-78px text-center">
            <calculate v-model="item.number" />
          </div>
          <div class="flex-1 text-center color-sup font-medium">
            ￥{{ item.price * item.number }}
          </div>
          <div class="flex-1 text-center">
            <div
              class="color-white-opacity-6 text-14px leading-20px cursor-pointer"
              @click.stop="cart.delete(item)"
            >
              删除
            </div>
          </div>
        </div>
        <div
          v-for="item in cart.getSelectedComboSkus"
          :key="item.id"
          class="flex px-22px mb-22px font-weight-350 items-center"
        >
          <div class="flex-1 text-left flex">
            <div class="w-72px h-72px">
              <img :src="item.img?.[0]" class="w-full h-full" alt="" />
            </div>
            <div class="ml-12px">
              <p class="text-14px text-white leading-20px mb-4px">
                <n-ellipsis style="max-width: 190px">
                  {{ item.name }}
                </n-ellipsis>
              </p>
              <div class="text-12px color-white-opacity-6 leading-17px">
                <div>{{ item.number }}份</div>
                <div class="flex items-start mt-6px w-190px">
                  <n-ellipsis style="max-width: 190px">
                    {{
                      item.skus.reduce((prev, sku, index) => {
                        prev +=
                          (index !== 0 ? ' | ' : '') +
                          sku.name +
                          '-' +
                          JSON.parse(sku.combination || '[]').reduce(
                            (prev, cur) => (prev += cur.value),
                            ''
                          )
                        return prev
                      }, '')
                    }}
                  </n-ellipsis>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 text-center text-14px text-white leading-20px">
            ￥{{
              item.skus.reduce((prev, sku) => {
                prev += Math.ceil((Number(sku.price) * Number(sku.discount)) / 10)
                return prev
              }, 0)
            }}
          </div>
          <div class="w-78px text-center">
            <calculate v-model="item.number" :is-combo="!!item.skuIds" />
          </div>
          <div class="flex-1 text-center color-sup font-medium">
            ￥{{
              (
                item.skus.reduce((prev, sku) => {
                  prev += Math.ceil((Number(sku.price) * Number(sku.discount)) / 10)
                  return prev
                }, 0) * Number(item.number)
              ).toFixed(2)
            }}
          </div>
          <div class="flex-1 text-center">
            <div
              class="color-white-opacity-6 text-14px leading-20px cursor-pointer"
              @click.stop="cart.deleteCombo(item)"
            >
              删除
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
  <cart-clear v-model:show="showClearCart" @on-cancel="cancel" @on-confirm="confirm" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useCartStore } from '@renderer/store/modules/cart'
import clearCart from '@renderer/assets/clearCart.svg'
import Calculate from '@renderer/components/calculate/index.vue'
import CartClear from '@renderer/components/cart/components/clear.vue'

const cart = useCartStore()

const showClearCart = ref<boolean>(false)

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:show'])

const open = computed({
  get: () => props.show,
  set: (v) => {
    emit('update:show', v)
    return v
  }
})

const clear = () => {
  emit('update:show', false)
  showClearCart.value = true
}

const cancel = () => {
  showClearCart.value = false
  emit('update:show', true)
}

const confirm = () => {
  cart.clear()
  showClearCart.value = false
}

const close = () => {
  console.log(123)
}
const closeUp = () => {
  emit('update:show', false)
}
</script>

<style scoped>
.category-item-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
</style>
